<template>
	<view class="pages">
		<view class="bac"></view>
		<view class="outer">
			<!-- 顶部提示 -->
			<view class="tip">支付成功，请您前往指定门店消费</view>

			<!-- 门店信息 -->
			<view class="store-card">
				<view class="store-left">
					<view class="store-name">{{ store.name }}</view>
					<view class="store-addr">{{ store.addr }}</view>
				</view>
				<navigator class="store-right" open-type="navigate" url="/pages/Maintenance/navigation/navigation">导航</navigator>
			</view>

			<!-- 订单详情 -->
			<view class="card">
				<view class="card-title">订单详情</view>
				<view class="row">
					<view class="row-left">{{ serviceName }}</view>
					<view class="row-right">¥ {{ price.service }}</view>
				</view>
				<view class="row">
					<view class="row-left">车辆附加费用</view>
					<view class="row-right">{{ price.extra }}</view>
				</view>
				<view class="divider"></view>
				<view class="row">
					<view class="row-left light">原价</view>
					<view class="row-right">¥ {{ price.origin }}</view>
				</view>
				<view class="row">
					<view class="row-left light">店家优惠</view>
					<view class="row-right danger">- ¥ {{ price.shopDiscount }}</view>
				</view>
				<view class="row">
					<view class="row-left light">优惠券</view>
					<view class="row-right danger">- ¥ {{ price.coupon }}</view>
				</view>
				<view class="divider"></view>
				<view class="row total">
					<view class="row-left">支付金额</view>
					<view class="row-right success">¥ {{ price.pay }}</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="card">
				<view class="card-title">订单信息</view>
				<view class="info-row">
					<view class="info-label">订单号：</view>
					<view class="info-value">{{ detail.orderId }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">下单时间：</view>
					<view class="info-value">{{ detail.createdAt }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">预约时间：</view>
					<view class="info-value">{{ detail.reserveAt }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">车辆：</view>
					<view class="info-value">{{ detail.car }}</view>
				</view>
				<view class="info-row">
					<view class="info-label">备注：</view>
					<view class="info-value">{{ detail.remark || '—' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const store = ref({
		name: '伟业汽车美容店（人民路店）',
		addr: '山阳区人民中路33号'
	})

	const serviceName = ref('车辆清洗')
	const price = ref({
		service: '39.90',
		extra: '0',
		origin: '59.90',
		shopDiscount: '20',
		coupon: '10',
		pay: '29.9'
	})

	const detail = ref({
		orderId: '1212121124887878',
		createdAt: '2023.03.13   17:40',
		reserveAt: '2023.03.18   13:40',
		car: '奔驰FWE4/豫A98FHJ',
		remark: ''
	})
</script>

<style>
	.pages {
		background-color: white;
	}

	.bac {
		background-color: #2b85e4;
		height: 200rpx;
	}

	.outer{
		margin-top: -140rpx;
		background-color: transparent;
		padding: 0 20rpx 40rpx;
	}

	.tip{
		margin: 0 10rpx 16rpx;
		color: #e8f2ff;
		font-size: 22rpx;
	}

	.store-card{
		margin: 0 10rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.05);
	}

	.store-name{
		font-size: 30rpx;
		font-weight: 600;
		color: #2b85e4;
	}

	.store-addr{
		margin-top: 6rpx;
		font-size: 24rpx;
		color: #6b7a90;
	}

	.store-right{
		color: #2b85e4;
		font-size: 28rpx;
	}

	.card{
		margin: 0 10rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 10rpx 24rpx 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
	}

	.card-title{
		font-size: 28rpx;
		font-weight: 600;
		padding: 16rpx 0;
	}

	.row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22rpx 0;
		font-size: 26rpx;
	}

	.row-left.light{
		color: #8a8a8a;
	}

	.row-right{
		color: #333;
	}

	.row-right.danger{
		color: #ff4d4f;
	}

	.row-right.success{
		color: #27ae60;
		font-weight: 700;
	}

	.divider{
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.total{
		padding-top: 26rpx;
	}

	.info-row{
		display: flex;
		padding: 18rpx 0;
		font-size: 26rpx;
		color: #333;
	}

	.info-label{
		width: 180rpx;
		color: #8a8a8a;
	}

	.info-value{
		flex: 1;
		text-align: right;
	}
</style>